<template>
	<div class="view-payment-confirm">
		
		<header-bar title="快钱支付">
			<a class="back" @click="onBackClick"></a>
		</header-bar>

		<div class="body">

			<h1>手机号{{mobile.substr(0,3)}}****{{mobile.substr(7,4)}}</h1>

			<form @submit.prevent>
				<div class="row">
					<div class="col">
						<label>验证码</label>
						<div class="input">
		                    <input type="tel" v-model="code" placeholder="请输入验证码" />
		                    <button :class="{fetching:t!==0}" @click="onGetVerCode">{{t===0?'点击获取':`${t}秒后可重发`}}</button>
		                </div>
	                </div>
				</div>
				<div class="row">
                    <btn :onClick="onSubmitClick">支付￥{{fmoney(amount)}}元</btn>
                </div>
			</form>

		</div>

		<small class="tips">凹凸共享租车服务热线<a href="tel:4006680202">400-668-0202</a></small>

	</div>
</template>

<script>
import headerBar from '@/components/header'
import btn from '@/components/btn'
import fmoney from '@/assets/fmoney'

export default {
	data() {
		return {
			t: 0,
			code: '',
			fmoney,
			amount: 0,
			mobile: '',

		}
	},
	created() {
		const {amount, mobile} = this.$route.params
		this.amount = amount
		this.mobile = mobile

		if (!(/^1[34578]\d{9}$/).test(mobile)) {
			this.$router.back()
		}
	},
	methods: {
		onBackClick() {
			this.$router.back()
		},
		onGetVerCode() {
			this.runTime(60)
		},
		onSubmitClick() {

		},
		runTime(t) {
            this.t = t
            if (t > 0) {
                setTimeout(() => {
                    this.runTime(--t)
                }, 1000)
            }
        },
	},
	components: {
		headerBar,
		btn,
	}
}
</script>

<style scoped lang="scss">
	@import './style'
</style>